<template>
  <div class="app-container">
    <div>
      <div style="display: flex;justify-content: space-between;padding: 0 40px;">
        <div class="title">
          <!-- <div class="icon"></div> -->
          <div style="margin-bottom: 10px;">{{ item.name }}</div>
          <div>{{ item.description }}</div>

        </div>
        <div> {{ item.type == 1 ? '填报类报表' : '汇总类报表' }} </div>
      </div>
      <el-divider />
    </div>
    <div class="" style="display: flex;justify-content: center;">
      <!-- <div ref="dataUniver" class="univer-container" /> -->
      <UniverSheet v-if="univerVisible" ref="univerRef" :data="table" class="univer-container" />
      <!-- <el-button @click="save">保存</el-button> -->
    </div>
    <div class="detail-btn">
      <el-button
        type="primary"
        style="width: 120px"
        @click="goBack"
      >返回</el-button>
    </div>
  </div>
</template>
<script>
// import { FUniver } from '@univerjs/facade'
import { getDataTemplateDetail } from '@/api/table'
import UniverSheet from '@/components/Univer/UniverSheet.vue'
export default {
  components: {
    UniverSheet
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      data: {},
      univerVisible: false,
      table: {}
      // table: {
      //   id: 't9vhzU',
      //   sheetOrder: ['sheet-01'],
      //   name: '',
      //   appVersion: '',
      //   locale: 'zhCN',
      //   styles: {},
      //   sheets: {
      //     'sheet-01': {
      //       type: 0,
      //       name: 'Sheet1',
      //       id: 'sheet-01',
      //       tabColor: '',
      //       hidden: 0,
      //       rowCount: 6,
      //       columnCount: 6,
      //       zoomRatio: 1,
      //       freeze: {
      //         xSplit: 0,
      //         ySplit: 0,
      //         startRow: -1,
      //         startColumn: -1
      //       },
      //       scrollTop: 0,
      //       scrollLeft: 0,
      //       defaultColumnWidth: 100,
      //       defaultRowHeight: 40,
      //       mergeData: [],
      //       hideRow: [],
      //       hideColumn: [],
      //       cellData: {},
      //       columnData: {},
      //       status: 1,
      //       showGridlines: 1,
      //       // 'rowHeader': {
      //       //   'width': 46,
      //       //   'hidden': 0
      //       // },
      //       // 'columnHeader': {
      //       //   'height': 20,
      //       //   'hidden': 0
      //       // },
      //       // 'selections': [
      //       //   'A1'
      //       // ],
      //       rightToLeft: 0,
      //       pluginMeta: {}
      //     }
      //   },
      //   resources: []
      // }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    setTimeout(() => {
      console.log(this.table, '--------------------------http://192.168.0.70:81/asdm/dashboard/analysis')
    }, 10)
  },
  methods: {
    fetchData() {
      getDataTemplateDetail({ id: this.item.id }).then((res) => {
        this.table = res.data.univer_data
        this.univerVisible = true
      })
    },
    initUniver() {
      var univer = new window.UniverCore.Univer({
        theme: window.UniverDesign.defaultTheme,
        locale: window.UniverCore.LocaleType.ZH_CN,
        logLevel: window.UniverCore.LogLevel.VERBOSE
      })

      // core plugins
      univer.registerPlugin(window.UniverDocs.UniverDocsPlugin, {
        hasScroll: false
      })
      univer.registerPlugin(window.UniverEngineRender.UniverRenderEnginePlugin)
      univer.registerPlugin(window.UniverUi.UniverUIPlugin, {
        container: this.$refs.dataUniver,
        header: false,
        toolbar: false
        // footer: true
      })
      univer.registerPlugin(window.UniverSheets.UniverSheetsPlugin)
      univer.registerPlugin(window.UniverSheetsUi.UniverSheetsUIPlugin)

      // sheet feature plugins
      univer.registerPlugin(window.UniverSheetsNumfmt.UniverSheetsNumfmtPlugin)
      univer.registerPlugin(
        window.UniverEngineFormula.UniverFormulaEnginePlugin
      )
      univer.registerPlugin(
        window.UniverSheetsFormula.UniverSheetsFormulaPlugin
      )

      // create univer sheet instance

      univer.createUniverSheet(this.table)
    },
    goBack() {
      this.$emit('goBack')
    },
    save() {
      const savedData = this.data.save()
      console.log(this.data, savedData, '-----------------savedData')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff7a8c;
  }
}
.detail-btn {
  margin-top: 30px;
  text-align: center;
}
.univer-container {
  // flex: 1;
  // display: inline-block;
  // margin-top: 80px;
  padding: 0px;
  width: 100%;
  // height: var(--heightLine);
  // height: 300px;
  bottom: 0px;
}
</style>
<style >
.univer-formula-box {
    /* display: none; */
  }
</style>

